<template>
  <div id="menWrap">
    <a-layout-header>
      <a-form layout="inline" :form="form" class="search_top">
        <a-form-item>
          <img class="table_search" src="../../assets/image/icon/table_search.png" alt="">
          <span>筛选</span>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="名称/编号" v-model="pagination.blurry" @keyup.enter="getMenusList"></a-input>
        </a-form-item>
        <a-form-item class="fright">
          <a-button class="search_btn" icon="search" @click="getMenusList">搜索</a-button>
        </a-form-item>
        <a-form-item class="fright">
          <a-button class="search_btn" icon="sync" @click="initPage">重置</a-button>
        </a-form-item>
      </a-form>
      <a-form layout="inline" class="search_top">
        <a-form-item>
          <img class="table_search" src="../../assets/image/icon/table_list.png" alt="">
          <span>账号列表</span>
        </a-form-item>
        <a-form-item class="fright">
          <!-- <a-button type="primary" icon="plus" v-permission:role="['roleAdd']" @click="addUser">新增</a-button> -->
          <a-button type="primary" icon="plus" @click="addUser">新增</a-button>
        </a-form-item>
      </a-form>
    </a-layout-header>
    <a-layout-content>
      <a-table
        :columns="columns"
        :dataSource="dataTable"
        :rowKey="record => record.key"
        :pagination="false"
        :loading="loading"
        bordered
      >
      <template slot="icon" slot-scope="text, record">
        <a-icon v-if="record.icon" :type="text" /> 
      </template>
      <template slot="type" slot-scope="text">
        <!-- <a-tag v-if="text === 'TITLE'" color="#108ee9">{{ switchType(text) }}</a-tag>
        <a-tag v-if="text === 'MENU'" color="rgb(135, 208, 104)">{{ switchType(text) }}</a-tag>
        <a-tag v-if="text === 'BUTTON'" color="#f50">{{ switchType(text) }}</a-tag> -->
        <a-tag v-if="text === 0" color="purple">{{ switchType(text) }}</a-tag>
        <a-tag v-if="text === 1" color="green">{{ switchType(text) }}</a-tag>
        <a-tag v-if="text === 2" color="red">{{ switchType(text) }}</a-tag>
      </template>
      <template slot="path" slot-scope="text, record">
        <span v-if="record.type === 1">{{ text }}</span>
        <span v-else></span>
      </template>
        <template slot="action" slot-scope="text, record">
          <!-- <a-tag color="#933dfe" @click="editUser">编辑</a-tag> -->
          <!-- <a-tag color="#f50">删除</a-tag> -->
          <a-tag color="#933dfe" @click="editUser(record)">编辑</a-tag>
          <a-tag color="#f50" v-if="record.children.length<=0" @click="deleteUser(record)">删除</a-tag>
          <a-tooltip v-else title="无法删除">
            <a-tag>删除</a-tag>
          </a-tooltip>
        </template>
      </a-table>
    </a-layout-content>
  </div>
</template>

<script>
import * as API from "../../api/menu";
import { switchType } from "../../utils/filter";

export default {
  name: "menWrap",
  data() {
    return {
      form: this.$form.createForm(this),
      pagination:{
        blurry: null
        },
      loading: false,
      columns: [
        {
          title: "菜单名称",
          dataIndex: "title",
          width: "19%",
          // align: "center",
          // key: "name",
          scopedSlots: { customRender: "name" }
        },
        // {
        //   title: "菜单ID",
        //   dataIndex: "nodeId",
        //   width: "9%",
        //   align: "center",
        //   // key: "id",
        //   scopedSlots: { customRender: "nodeId" }
        // },
        {
          title: "图标",
          dataIndex: "icon",
          width: "9%",
          align: "center",
          // key: "icon",
          scopedSlots: { customRender: "icon" }
        },
        {
          title: "类型",
          dataIndex: "type",
          width: "11%",
          align: "center",
          // key: "type",
          scopedSlots: { customRender: "type" }
        },
        {
          title: "排序",
          dataIndex: "menuSort",
          width: "11%",
          align: "center",
          // key: "menuSort",
          scopedSlots: { customRender: "menuSort" }
        },
        {
          title: " 菜单URL",
          dataIndex: "path",
          width: "11%",
          align: "center",
          scopedSlots: { customRender: "path" }
        },
        {
          title: "操作",
          dataIndex: "action",
          width: "19%",
          align: "center",
          // key: "action",
          scopedSlots: { customRender: "action" }
        }
      ],
      dataTable: [
      ]
    };
  },
  mounted() {
    // this.getMenusList();
  },
  created () {
    console.log(1111111)
    // debugger
    this.getMenusList();
  },
  methods: {
    switchType,
    getMenusList() {
      this.loading = true
      // 获取菜单信息
      API.getMenus(this.pagination)
        .then(res => {
          if (res.code === 200) {
            this.dataTable = res.data;
          }
          this.loading = false
        })
    },
    count(list) {
      list.forEach((item) => {
        item.key = item.id;
        if (item.children) {
          item.children = this.count(item.children)
        }
      });
      return list
    },
    deleteUser(record) {
      let that = this 
      this.$confirm({ 
        okText: '确定', 
        cancelText: '取消', 
        title: '', 
        content: '确定进行删除操作？', 
        onOk () { 
          let arr = []
          arr.push(record.nodeId)
           API.delMenu (arr).then(res => {
            if (res.code === 200) { 
              that.$message.destroy();
              that.$message.success('删除成功') 
              that.getMenusList() 
            }
          }) 
        }, 
        onCancel () {} 
      })

    },
    editUser(record) {
      this.$router.push({
          path: '/menu/configMenu',
          query: {
            id: record.nodeId,
            key: Date.now()
          }
        })
    },
    addUser() {
      this.$router.push({
          path: '/menu/addMenu'
        })
    },
    initPage() {
      this.pagination.blurry = null;
      this.getMenusList();
    },
  }
};
</script>
